<template>
	<div class="right-box">
		<Breadcrumb style="margin-bottom: 5px;">
	        <BreadcrumbItem>
	            <Icon type="ios-paper" color="red" size="18"></Icon> 物资管理
	        </BreadcrumbItem>
	        <BreadcrumbItem>
	            申请记录
	        </BreadcrumbItem>
	    </Breadcrumb>
	    <Button class="addBtn" @click="modelShow=true">新增申请</Button>
	    <Table height="480" :columns="columns1" :data="datas">
	    	<template slot-scope="{row,index}" slot="status">
	    		<span v-if="row.status == 0">待处理</span>
	    		<span v-if="row.status == 1">已同意</span>
	    		<span v-if="row.status == 2">已拒绝</span>
	    	</template>
	    </Table>
	    <Modal
        title="请填写添加内容"
        v-model="modelShow"
        :closable="false" @on-ok="checkSure"  @on-cancel="handleReset('formValidate')">
	        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
		        <FormItem label="申请物资" prop="type">
		            <Select v-model="formValidate.type" placeholder="请选择需要的物资">
		                <Option :value="item.itemId" v-for="(item,index) in items" :key="index">{{item.itemName}}</Option>
		            </Select>
		        </FormItem>
		        <FormItem label="申请数量" prop="count">
		        	<InputNumber :min="1" v-model="formValidate.count"></InputNumber>
		        </FormItem>
		    </Form>
	    </Modal>
	</div>
</template>

<script>
	export default{
		name:'applyHistory',
		data(){
			return{
				modelShow:false,//弹窗默认隐藏
				formValidate: {//表单内容
                    type:'',
                    count:1
                },
                ruleValidate: {//表单校验规则
                    type: [
                        { required: true, message: '申请物资不能为空', trigger: 'blur' }
                    ]
                },
				columns1: [//表头
                    {
                        title: '申报编号',
                        key: 'recordId'
                    },
                    {
                        title: '申报内容',
                        key: 'recordItemName'
                    },{
                    	title:'申报数量',
                    	key:'recordItemCount'
                    },{
                    	title:'所属仓库',
                    	key:'recordWarehouseName'
                    },{
                    	title:'申请时间',
                    	key:'createTime'
                    },{
                    	title:'状态',
                    	key:'status',
                    	slot:'status'
                    }
                ],
				datas:[],//表格数据
				items:[],//物资数据
			}
		},
		methods:{
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            handleSubmit(name) {//验证表单
               this.$refs[name].validate((valid) => {
                    if (valid) {//验证通过
                    	this.addApply()
                    } else {//验证不通过
                        this.$Message.error('请按要求完善表单!');
                        this.handleReset('formValidate')
                    }
                })
            },
			checkSure(){//点击弹窗确定 验证表单
				this.handleSubmit('formValidate')
			},
			addApply(){//添加申请
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/addItemRecord',
	    			data:{
	    				recordItemId:that.formValidate.type,
	    				recordUserId:that.LS.getLS('userId'),
	    				recordItemCount:that.formValidate.count
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			if(res.data.code == 200){
	    				this.getApply()
	    				this.$Message.success(res.data.msg)
	    			}else{
	    				this.$Message.error(res.data.msg)
	    			}
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			},
			getApply(){//获取申请记录
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/getItemRecord',
	    			data:{
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			this.datas = res.data.itemRecordList
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			},
			getAllThings(){//获取所有物资
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/getItem',
	    			data:{
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			this.items = res.data.itemList
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			}
		},
		created(){
			this.getApply()
			this.getAllThings()
		}
	}
</script>

<style scoped>
.right-box{
	width: 100%;
	height: 100%;
	position: relative;
}
.addBtn{
	position: absolute;
	top: -10px;
	right: 20px;
}
.page-nav{
	width: 100%;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -moz-box;
	display: flex;
	justify-content: center;
	align-content: center;
	margin-top: 10px;
}
</style>